<template>
	<view class="record">
		<view class="record-title">
			<view class="record-title-item one">时间</view>
			<view class="record-title-item">数量</view>
			<view class="record-title-item">单价</view>
			<view class="record-title-item">合计</view>
			<view class="record-title-item">状态</view>
			<view class="record-title-item">操作</view>
		</view>
		<van-tabs :ifbuy="true" :active="active" color="#3e527e" @change="onTabChange">
			<van-tab title="当前挂单"><tab1 :activeTAB="active" ref="tab1"></tab1></van-tab>
			<van-tab title="正在交易"><tab2 :activeTAB="active" ref="tab2"></tab2></van-tab>
		</van-tabs>
	</view>
</template>

<script>
import tab1 from './tab/tab1.vue';
import tab2 from './tab/tab2.vue';
export default {
	components: {
		tab1,
		tab2
	},
	data() {
		return {
			active: 0
		};
	},
	onLoad(op) {
		this.active = Number(op.tab)
	},
	onShow() {
		if (this.active) {
			this.$refs.tab2.mySellIng();
		} else {
			this.$refs.tab1.myBuyIng();
		}
	},
	methods: {
		onTabChange(event) {
			this.active = event.detail.index;
			if (event.detail.index) {
				this.$refs.tab2.mySellIng();
				return;
			}
			this.$refs.tab1.myBuyIng();
		}
	}
};
</script>

<style scoped lang="scss">
.record {
	&-title {
		position: fixed;
		z-index: 1;
		top: 44px;
		right: 0;
		left: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		background-color: #fff;
		&-item {
			flex: 1;
			padding: 20upx 0;
			color: #9b9b9b;
			min-width: 50upx;
			&.one {
				min-width: 180upx;
				flex: none;
			}
		}
	}
}
</style>
